import React, { ReactElement, useContext, useMemo } from 'react';
import { View, Text } from 'react-native';

import styles from './style';
import { Store } from '../../../../reducer';
import { computeTime } from '../../../../func';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { classRoomTotalTime } = state;
  return useMemo(
    (): ReactElement => (
      <View style={[styles.currentContent, styles.totalContent]}>
        <Text style={styles.time}>
          {computeTime(classRoomTotalTime / 1000)}
        </Text>
      </View>
    ),
    [classRoomTotalTime]
  );
};
